<template>
	<view>
		<view class="wrapper">
			<view class="activity-box" @click="toOrderDetail">
				<view class="activity-img">
					<image mode="aspectFill" :src="activity.coverImg">
					</image>
				</view>
				<view class="activity-box_bd">
					<view class="activity-title">{{activity.activityName}}</view>
					<view class="activity-category">
						<view>{{ activity.categoryName || '-' }}</view>
						<view class="activity-look">
							<text>再去看看</text>
							<u-icon name="arrow-right" size="28rpx" color="rgba(0, 0, 0, 0.5)"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="wrapper qrcode-wrapper"
			v-if="order.orderStatus == 20 && order.payStatus == 20 && order.checkStatus != 1 && order.checkStatus != 3">
			<image class="wrapper-bg" src="/static/img/codeBg.png"></image>
			<view class="order-status">「 {{ order.orderStatusText }} 」</view>
			<view class="order-qrcode">
				<image show-menu-by-longpress="true" mode="aspectFill" :src="order.qrCodeImg"></image>
			</view>
			<p class="order-no">电子票号：{{order.orderNo}}</p>
		</view>

		<view class="wrapper info-wrapper">
			<view class="info-box">
				<view class="info-label">当前状态</view>
				<view class="info-value">
					<view>{{ order.orderStatusText }}</view>
					<view class="info-value-desc" v-if="order.checkStatus==3&&order.desc.length>0">{{ order.desc }}
					</view>
				</view>
			</view>
			<view class="info-box">
				<view class="info-label">活动时间</view>
				<view class="info-value">{{ activity.timeStart }} - {{ activity.timeEnd }}</view>
			</view>
			<view class="info-box">
				<view class="info-label">报名费用</view>
				<view class="info-value">{{ order.payPrice>0? `¥ ${order.payPrice}`:"免费" }}</view>
			</view>
			<view class="info-box">
				<view class="info-label">支付方式</view>
				<view class="info-value">{{ order.payType==30 ? "活动权益抵扣" : "微信支付" }}</view>
			</view>
			<view class="info-box" v-if="order.payTime">
				<view class="info-label">支付时间</view>
				<view class="info-value">{{ order.payTime }}</view>
			</view>
			<view class="info-box">
				<view class="info-label">报名人</view>
				<view class="info-value">{{ order.nickName }}</view>
			</view>
			<view class="info-box">
				<view class="info-label">联系电话</view>
				<view class="info-value">{{ order.phonenumber }}</view>
			</view>
		</view>

		<view class="foorter-wrapper" v-if="order.orderStatus!=10">
			<view class="footer-box">
				<view class="footer-btn" @click="cancelOrder" v-if="order.orderStatus == 20">取消订单</view>
				<view class="footer-btn primary" @click="handlePayOrder"
					v-if="order.orderStatus == 20 && order.payStatus == 10">立即支付</view>
				<view class="footer-btn" @click="toggleIsShowShare"
					v-if="order.orderStatus != 10 && order.payStatus == 20 && (order.checkStatus != 1 || order.checkStatus != 3)">
					邀请好友</view>
			</view>
		</view>

		<!-- 邀请好友 -->
		<u-popup :show="isShowShare" @close="toggleIsShowShare">
			<view class="share-wrapper">
				<image class="share-wrapper_bg" mode="aspectFill" src="/static/img/windowsBg.png">
				</image>
				<view class="share-wrapper_hd">
					<text>邀请好友</text>
					<view class="close-btn">
						<u-icon name="close" color="#1A1311" size="24"></u-icon>
						<view class="hotarea" @click="toggleIsShowShare"></view>
					</view>
				</view>
				<view class="share-wrapper_bd">
					<view class="share-box">
						<text>分享微信好友</text>
						<button open-type="share" hover-class="none" @click="handleShare('WX')"></button>
					</view>
					<view class="share-box" @click="handleShare('POSTER')">生成专属邀请函</view>
				</view>
			</view>
		</u-popup>

		<u-popup mode="center" :safeAreaInsetBottom="false" :show="isShowSharePoster" @close="isShowSharePoster=false">
			<view class="poster-wrapper">
				<image :src="sharePoster" mode="scaleToFill" v-if="sharePoster" class="poster-image"></image>
				<view class="btn primary" @click="handleSavePoster()">保存到手机</view>
			</view>
		</u-popup>

		<canvas class="my-canvas" canvas-id="myCanvas"></canvas>
	</view>

</template>

<script>
	import {
		getOrder,
		payOrder,
		queryOrder,
		cancelOrder
	} from '@/api/order.js'
	import {
		dateFormat,
		wxPayment
	} from '@/utils/util.js'
	import {
		formatOrderStatus
	} from '@/libs/order.js';
	import {
		mapGetters
	} from "vuex";

	export default {
		components: {},
		computed: {
			...mapGetters({
				userInfo: 'userInfo',
			})
		},
		data() {
			return {
				// 页面传参
				options: {},
				// 邀请好友显示
				isShowShare: false,
				// 订单信息
				order: null,
				// 活动信息
				activity: null,
				// 分享海报
				sharePoster: false,
				// 显示邀请海报
				isShowSharePoster: false,
			}
		},

		onLoad(options) {
			let that = this
			that.options = options
		},

		onShow() {
			this._getOrder()
		},

		methods: {

			// 获取用户信息
			_getUserInfo() {
				let that = this
				that.$store.dispatch('getUserInfo')
			},

			// 查询订单详情
			_getOrder() {
				let that = this
				uni.showLoading()
				getOrder({
					orderNo: that.options.orderNo
				}).then(res => {
					let {
						timeStart,
						timeEnd,
						order
					} = res.data
					that.activity = {
						...res.data,
						timeStart: dateFormat('YYYY/mm/dd', new Date(timeStart)),
						timeEnd: dateFormat('YYYY/mm/dd', new Date(timeEnd)),
					}
					that.order = {
						...order,
						payTime: order.payTime && dateFormat('YYYY/mm/dd HH:MM', new Date(order.payTime)),
						orderStatusText: formatOrderStatus(order),
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},

			// 邀请好友方式选择
			async handleShare(type) {
				const that = this
				switch (type) {
					case 'WX':
						that.isShowShare = false
						break;
					case 'POSTER':
						uni.showLoading()
						that.isShowShare = false
						if (!that.sharePoster) {
							await that.$store.dispatch('getUserInfo')
							if (!that.userInfo.nickName) {
								uni.getUserProfile({
									lang: 'zh_CN',
									desc: '完善用户信息',
									success: (res) => {
										let {
											avatarUrl,
											nickName
										} = res.userInfo
										that.$store.dispatch('updateUserInfo', {
											"avatar": avatarUrl,
											"nickName": nickName
										}).then(res => {
											that.drawPoster(that.activity.shareImg, that.activity
												.qrCode, nickName)
										})
									},
									fail: (err) => {
										console.log(err)
										uni.hideLoading()
									}
								})
							} else {
								that.drawPoster(that.activity.shareImg, that.activity.qrCode, that.userInfo.nickName)
							}
						} else {
							that.isShowSharePoster = true
							uni.hideLoading()
						}
						break;
				}
			},

			//分享当前页面
			onShareAppMessage() {
				const that = this
				let {
					activityId,
					activityName,
					coverImg
				} = that.activity
				return {
					path: `/pages/activity/detail?activityId=${activityId}`,
					title: activityName,
					imageUrl: coverImg,
				}
			},

			// 显示/隐藏分享弹窗
			toggleIsShowShare() {
				this.isShowShare = !this.isShowShare
			},

			// 查看活动详情
			toOrderDetail() {
				let that = this
				this.$util.navTo('pages/activity/detail', {
					activityId: that.activity.activityId
				})
			},

			// 取消订单
			cancelOrder() {
				let that = this
				uni.showModal({
					title: '取消订单',
					content: '确认取消此次报名吗？',
					success: (res) => {
						if (res.confirm) {
							cancelOrder({
								orderNo: that.options.orderNo
							}).then(res => {
								that.$util.showSuccess('取消成功')
							}).finally(() => {
								that._getOrder()
							})
						}
					}
				})

			},

			// 立即支付
			handlePayOrder() {
				const that = this
				let {
					orderNo
				} = that.options
				payOrder({
					orderNo: orderNo
				}).then(res => {
					if (res.data.needPay) {
						// 发起微信支付
						wxPayment(res.data.result)
							.finally(res => {
								that._queryOrder(orderNo)
							})
					} else {
						that._queryOrder(orderNo)
					}
				})
			},

			// 支付查询
			_queryOrder(orderNo) {
				uni.showLoading()
				let that = this
				queryOrder({
						"orderNo": orderNo
					}).then(res => {
						if (res.data.isPay) {
							that.$util.showSuccess('报名成功')
							setTimeout(() => {
								that._getOrder()
							}, 1000)
						} else {
							that.$util.showError('订单未支付')
						}
					})
					.catch(err => {
						console.log(err)
					})
					.finally(res => {
						uni.hideLoading()
					})
			},

			// 网图本地化
			getImage(path) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: path,
						success(res) {
							resolve(res.path)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},

			//绘制海报
			async drawPoster(bgPath, mpCode, nickname) {
				uni.showLoading()
				let that = this;
				bgPath = await that.getImage(bgPath)
				mpCode = await that.getImage(mpCode)
				const ctx = uni.createCanvasContext('myCanvas')

				let WIDTH = 600
				let HEIGHT = 800

				// 清除画布
				ctx.clearRect(0, 0, WIDTH, HEIGHT);
				// 设置背景
				ctx.drawImage(bgPath, 0, 0, WIDTH, HEIGHT);
				// 设置昵称
				ctx.setFillStyle("#000000");
				ctx.font = "bold 40px Arial";
				ctx.setTextAlign('center')
				ctx.setTextBaseline('top')
				ctx.fillText(nickname, 300, 500);
				// 小程序码
				ctx.drawImage(mpCode, 240, 618, 120, 120);
				ctx.font = "normal 16px Arial";
				ctx.setTextAlign('center')
				ctx.setTextBaseline('top')
				ctx.fillText('长按识别进入「URBANLEAVING」小程序', 300, 754);

				ctx.draw(false, res => {
					wx.canvasToTempFilePath({
						canvasId: "myCanvas",
						fileType: "png",
						success: (res) => {
							that.sharePoster = res.tempFilePath;
							that.isShowSharePoster = true
						},
						fail: () => {
							uni.showToast({
								title: "加载失败",
								duration: 2000,
							});
						},
						complete: (res) => {
							uni.hideLoading()
						}
					});
				})
			},

			// 保存到手机
			handleSavePoster() {
				uni.showLoading()
				let that = this
				let fileM = uni.getFileSystemManager()
				uni.saveImageToPhotosAlbum({
					filePath: that.sharePoster,
					success() {
						that.$util.showSuccess('已保存')
					},
					complete: (res) => {
						console.log(res)
						uni.hideLoading()
					}
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.wrapper {
		position: relative;
		background-color: rgba(247, 245, 240, 1);
		margin-bottom: 24rpx;

		.activity-box {
			display: flex;
			padding: 32rpx;
			font-size: 28rpx;
			color: $uni-text-color;
			line-height: 40rpx;

			.activity-img {
				width: 240rpx;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 24rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.activity-box_bd {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.activity-title {
					font-weight: bold;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
				}

				.activity-category {
					color: $uni-text-color-grey;
					display: flex;
					justify-content: space-between;

					.activity-look {
						display: flex;
						align-items: center;
					}
				}
			}

		}

	}

	.info-wrapper {
		padding: 0;

		.info-box {
			display: flex;
			justify-content: space-between;
			padding: 32rpx;
			position: relative;
			font-size: 28rpx;

			.info-label {
				color: rgba(0, 0, 0, 0.5);
				min-width: 120rpx;
				padding-right: 32rpx;
			}

			.info-value {
				text-align: right;

				.info-value-desc {
					font-size: 26rpx;
					color: $uni-text-color-grey;
					margin-top: 8rpx;
				}
			}

			&+.info-box::after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 32rpx;
				right: 32rpx;
				border-top: 1rpx solid rgba(26, 19, 17, .1);
			}
		}
	}

	.share-wrapper {
		position: relative;
		padding-bottom: 64rpx;

		.share-wrapper_bg {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
		}

		.share-wrapper_hd {
			display: flex;
			align-items: center;
			padding: 48rpx 32rpx;
			z-index: 10;
			position: relative;

			text {
				flex: 1;
				font-size: 34rpx;
				font-weight: bold;
			}

			.close-btn {
				position: relative;

				.hotarea {
					opacity: 0;
					position: absolute;
					top: -24rpx;
					left: -24rpx;
					right: -24rpx;
					bottom: -24rpx;
				}
			}
		}

		.share-wrapper_bd {
			padding: 0 32rpx;
			z-index: 10;
			position: relative;

			.share-box {
				background-color: rgba(247, 245, 240, 1);
				border: 1rpx solid rgba(26, 19, 17, 1);
				font-size: 28rpx;
				color: rgba(26, 19, 17, 1);
				padding: 48rpx 32rpx;
				border-radius: 16rpx;
				text-align: center;
				position: relative;

				&+.share-box {
					margin-top: 32rpx;
				}

				button {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					opacity: 0;
				}
			}
		}
	}

	.foorter-wrapper {

		&::before {
			content: '';
			display: block;
			height: calc(160rpx + env(safe-area-inset-bottom));
		}

		.footer-box {
			border-top: 1rpx solid rgba(26, 19, 17, .1);
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
			height: 160rpx;
			padding: 0 32rpx;
			background-color: rgba(247, 245, 240, 1);
			display: flex;
			align-items: center;

			&::after {
				content: '';
				display: block;
				height: env(safe-area-inset-bottom);
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				background-color: rgba(247, 245, 240, 1);
			}

			.footer-btn {
				flex: 1;
				line-height: 96rpx;
				border: 1rpx solid rgba(26, 19, 17, 1);
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(26, 19, 17, 1);
				border-radius: 48rpx;
				text-align: center;

				&+.footer-btn {
					margin-left: 24rpx;
				}

				&.primary {
					background-color: rgba(26, 19, 17, 1);
					color: #fff;
				}

			}

		}
	}

	.qrcode-wrapper {
		padding: 64rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		background-color: unset;

		.wrapper-bg {
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;

		}

		.order-status {
			font-size: 40rpx;
			font-weight: bold;
		}

		.order-qrcode {
			width: 440rpx;
			height: 440rpx;
			margin-top: 32rpx;

			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.order-no {
			font-size: 28rpx;
			font-weight: bold;
			margin-top: 32rpx;
		}
	}

	.poster-wrapper {
		padding: 32rpx;

		.poster-image {
			display: block;
			width: 600rpx;
			height: 800rpx;
		}

		.btn {
			line-height: 96rpx;
			background-color: rgba(26, 19, 17, 1);
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
			border-radius: 48rpx;
			text-align: center;
			margin-top: 24rpx;
		}
	}

	.my-canvas {
		position: fixed;
		left: 100%;
		width: 600px;
		height: 800px;
		opacity: 0;
	}
</style>
